import React from 'react'


class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            date: new Date(),
            value: '',
            selectValue: '',
        }
    }
    handleChange(event) {
      this.setState({
        value: event.target.value.toUpperCase(),
      })
    }
    handleSumbmit(event) {
      alert('提交的名字' + this.state.value);
      event.preventDefault();
    }
    handleSelectChange(event) {
      this.setState({
        selectValue: event.target.value,
      })
    }
    render() {
      return <div>
        <h1>111</h1>
        <form onSubmit={this.handleSumbmit.bind(this)}>
          <label>
              名字:
              <input type="text" name="name" value={this.state.value} onChange={this.handleChange.bind(this)} />
          </label>
          <label>
            <select name="" id="" value={this.state.selectValue} onChange={this.handleSelectChange.bind(this)}>
              <option value="grapefruit">葡萄柚</option>
              <option value="lime">酸橙</option>
              <option value="coconut">椰子</option>
              <option value="mango">芒果</option>
            </select>
          </label>
          <input type="submit" value="提交" />
        </form>
      </div>;
    }
  }


  export default Form;